'use strict'

$(function () {
    query()
})

// 查找
function query() {
    let keyword = $('#keyword').val()
    getProduct(keyword).then(data=>{
        render(data)
    })
}
// 显示页面数据
function render(arr) {
    let row = $('.rowData')
    let tb = $('#tbData')
    row.remove();
    arr.forEach(item => {
        let html = `
        <tr class="rowData" key='${item.id}'>
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.price}</td>
            <td>${item.supplier}</td>
            <td>
                <input type="button" value="编辑" onclick="Edit(${item.id})">
                <input type="button" value="删除" onclick="del(${item.id})">
            </td>
        </tr>
        `
        tb.append(html)
    });
}

// 跳到编辑或者新增页面
function Edit(id){

    location.href=`./addOrEdit.html?${id}`
}

// 删除
function del(id){
    let confirmDel = confirm(`确定删除id为${id}的数据吗？`)
    if(confirmDel){
        delProductId(id).then(data=>{
            let id = data.data.id
            $(`[key=${id}]`).remove()
        })
    }
}

// 添加
function add(){
    location.href=`./addOrEdit.html`
}
